<template>
    <div class="structure">
        <LeaderLineLabelPage />

        <StructureDrawer />
        <StructureListView />

        <span v-show="StructureComponent.Default.Description.value != ''">
            {{ StructureComponent.Default.Description.value }}
        </span>

        <LaserRadarAside />

        <LaserRadarHeader />
    </div>
</template>

<script setup lang="ts">
import LaserRadarHeader from './LaserRadarHeader.vue';
import LaserRadarAside from './LaserRadarAside.vue';
import LeaderLineLabelPage from './LeaderLineLabelPage.vue';
import StructureDrawer from './StructureDrawer.vue';
import StructureListView from './StructureListView.vue';
import { StructureComponent } from './LaserRadarComponent';
import { onMounted, onUnmounted } from 'vue';


onMounted(() => StructureComponent.Default.Awake());
onUnmounted(() => StructureComponent.Default.Destroy());
</script>

<style scoped>
.structure {
    background-color: transparent;
}


.structure>span {
    position: absolute;
    top: 14.4rem;
    left: 50%;

    transform: translateX(-50%);

    max-width: 100rem;

    padding: 2rem 4rem;

    background-color: #131620;
    border-radius: 2rem;

    color: #BEBEFF;
    font-size: 3.6rem;
    font-weight: 500;

    text-indent: 2em;
}
</style>